<template>
  <div>
    <div class="list">
      <h2>{{activity.title}}</h2>
      <ul>
        <li>
          <span class="s1">活动时间:</span>
          <div class="s2">{{activity.startTime}}--{{activity.endTime}}</div>
        </li>
        <li>
          <span class="s1">活动地点:</span>
          <div class="s2">{{activity.local}}</div>
        </li>
        <li>
          <span class="s1">需求说明:</span>
          <div class="s2">{{activity.need}}</div>
        </li>
        <li>
          <span class="s1">报名人数:</span>
          <div class="s2">{{number}}/{{activity.number}}</div>
        </li>
        <li>
          <span class="s1">联系方式:</span>
          <div class="s2">{{activity.phone}}</div>
        </li>
        <li>
          <span class="s1">发布人:</span>
          <div class="s2">{{activity.name}}</div>
        </li>
        <li>
          <span class="s1">服务组织:</span>
          <div class="s2">{{activity.detail}}</div>
        </li>
      </ul>
    <button @click="apply" :disabled="disabled">我要报名</button>
    </div>
  </div>
</template>


<script>
  import request from '../../utils/request'
  import moment from 'moment'
  export default{
    data(){
      return {
        activity:[],
        userInfo:{},
        number:0,
        disabled:false,
        diff:0
      }
    },
    methods: {
      async apply(){
        this.userInfo = wx.getStorageSync('userInfo');
        let user = wx.getStorageSync('user');
        if(this.number>=this.activity.number){
          this.disabled = true
        }else if(user){
          
          let data = {
            id: this.activity._id,
            title: this.activity.title,
            sno: user.sno,
            name: user.name,
            number: this.activity.number
          }
          let result = await request('/apply/applyList',{data},'GET');
          console.log(result)
          if(result=='1'){
            let id = this.activity._id
            let result1 = await request('/activity/oneList',{id},'GET');
            console.log(result1.status)
            if(result1.status==1){
              wx.showToast({
                title: '报名成功',
                duration: 5000
              })
              this.disabled = true
              this.number = this.activity.numbered+1
            }
            
          }else{
            this.disabled = true
          }

        }else if(this.userInfo){
          wx.navigateTo({
              url:'/pages/login/main'
            })
        }else{
          wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            this.userInfo=res.userInfo;
            wx.setStorageSync('userInfo',this.userInfo);
            wx.login({ 
              success: async (res) => {
              //let code = res.code  //有效时长5分钟
              let data ={
                code:res.code,
                img:this.userInfo.avatarUrl,
                wxname:this.userInfo.nickName
              }
              console.log(data);
              let token = await request('/user/getOpenId',{data},'GET');
              //将自定义登陆状态缓存到storage中 
              wx.setStorageSync('token',token)
              console.log(token)
              }             
            })  
            wx.navigateTo({
              url:'/pages/login/main'
            })
        },
        fail: (res) => {
            this.userInfo={};
            console.log(res);
          },
      })
      }
      }
    },
    mounted() {
      this.activity = JSON.parse(this.$mp.query.activity)
      this.number = this.activity.numbered
      console.log(this.number);
      console.log(this.activity.endTime)
      let endTime = moment(this.activity.endTime).format("HH:mm MM/D/YYYY")
      let now = moment().format("HH:mm MM/D/YYYY")
      let diff1 = moment(endTime).diff(moment(now), 'minutes')
      //console.log(diff1)
      if(diff1<0){
        this.disabled = true
      }
    },
  }
</script>

<style scoped>
.list{
  width:100%;
  height:100%;
}
.list h2{
  color:red;
  text-align: center;
}
.list ul li{
  margin:40px 0;
  border-bottom: 1px solid rgb(202, 194, 194);
  padding-bottom: 20px;
  overflow:hidden;
}
.list ul li .s1{
  margin-left: 20px;
  color: red;
}
.list ul li .s2{

  width:220px;
  float: right;
  margin-right:20px;
  font-size:17px;
  color:rgb(146, 128, 128)
}
button{
  background-color:red;
}
</style>
 